/*
 * @Author: 自迩
 * @Date: 2022-03-22 21:35:51
 * @LastEditTime: 2022-03-23 21:23:04
 * @LastEditors: your name
 * @Description:
 * @FilePath: \class-ending-homework\src\components\Enroll\index.jsx
 */
import React, {useState,useRef} from 'react'
import UserSchool from '../UserSchool'
import './index.css'
import UserYear from '../UserYear'

let myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
let timer= null
export default function Enroll() {
    let [userSchoolState, setUserSchoolState] = useState({style:'user-school',selectedLocal:'湖南省',selectedSchool:'',userBox:'hidden',schoolBox:'hidden'})
    let [userYearState, setUserYearState] = useState({year:2010, style:'user-year',userYear:'hidden'})
    let emailText = useRef('')
    let [enrollState,setEnrollState] = useState({emailFlag:true,enrollBoxFlag:'visible',promptFlag:'hidden',promptStyle:'prompt-box',prompt:'',enrollSuccessBoxFlag:'hidden'})

    const schoolBoxMouseOver = e =>{
        userSchoolState.style = 'user-school user-school-mouseover'
        userSchoolState.userBox = 'visible'
        setUserSchoolState({...userSchoolState})
    }
    const schoolBoxMouseOut = e =>{
        userSchoolState.style = 'user-school'
        userSchoolState.userBox = 'hidden'
        setUserSchoolState({...userSchoolState})
    }
    const localTableClick = e =>{
        // console.log(e.target.textContent);
        const {textContent} = e.target
        userSchoolState.selectedLocal = textContent
        userSchoolState.selectedSchool = ''
        setUserSchoolState({...userSchoolState})
    }
    const schoolTableClick = e =>{
        console.log(e.target.textContent);
        userSchoolState.selectedSchool = e.target.textContent
        setUserSchoolState({...userSchoolState})
    }

    const yearBoxMouseOver = e =>{
        userYearState.style = 'user-year user-year-mouseover'
        userYearState.userYear = 'visible'
        setUserYearState({...userYearState})
    }
    const yearBoxMouseOut = e =>{
        userYearState.style = 'user-year'
        userYearState.userYear = 'hidden'
        setUserYearState({...userYearState})
    }
    const yearBoxClick = e =>{
        userYearState.year = e.target.textContent*1
        setUserYearState({...userYearState})
    }
    const enrollEvent = e =>{
        if(!userSchoolState.selectedSchool){
            enrollState.promptFlag = 'visible'
            enrollState.prompt = '未选择学校信息，请重新选择！'
            setEnrollState({...enrollState})
        }
        else if(!myreg.test(emailText.current.value)){
            console.log('fail');
            enrollState.promptFlag = 'visible'
            enrollState.prompt = '邮箱地址不符合要求，请重新输入！'
            setEnrollState({...enrollState})
        }
        else{
            console.log('success');
            enrollState.promptFlag = 'visible'
            enrollState.promptStyle = 'prompt-box prompt-success'
            enrollState.prompt = `恭喜你！来自${userSchoolState.selectedLocal}的${userSchoolState.selectedSchool}的同学，您的报名信息已收到，请关注邮件信息。`
            enrollState.enrollBoxFlag = 'hidden'
            enrollState.enrollSuccessBoxFlag = 'visible'
            setEnrollState({...enrollState})
        }

        timer = setTimeout(()=>{
            enrollState.promptFlag = 'hidden'
            setEnrollState({...enrollState})
        },2000)
    }

    const enrollAgain = e =>{
        if(timer){
            clearTimeout(timer)
            enrollState.promptFlag = 'hidden'
        }
        enrollState.enrollSuccessBoxFlag = 'hidden'
        enrollState.enrollBoxFlag = 'visible'
        setEnrollState({...enrollState})
    }
    return (
    <>
    <div  style={{visibility:enrollState.enrollBoxFlag}} className="enroll">
        <UserSchool {...userSchoolState} schoolBoxMouseOver={schoolBoxMouseOver} schoolBoxMouseOut={schoolBoxMouseOut} localTableClick={localTableClick} schoolTableClick={schoolTableClick}/>
        <UserYear {...userYearState} yearBoxMouseOver={yearBoxMouseOver} yearBoxMouseOut={yearBoxMouseOut} yearBoxClick={yearBoxClick} />

        <div>
            <p>输入您的电子邮箱</p>
            <input type="email" id="user-email" ref={emailText}/>
        </div>
        <div>
            <p>&nbsp;</p>
            <button id="enroll-btn" onClick={enrollEvent}>报名</button>

        </div>


    </div>
    <div style={{visibility:enrollState.enrollSuccessBoxFlag}} id="enroll-success-box">
        <p>您已完成报名，开始您的学习之旅吧！</p>
        <span onClick={enrollAgain}>重新报名</span>
    </div>

    <div className={enrollState.promptStyle} style={{visibility:enrollState.promptFlag}} >{enrollState.prompt}</div>
    </>
  )
}
